<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="font-size:14px;font-weight:bold;">
        <span>产品列表</span>
      </div>
      <!-- 查询和其他操作 -->
      <div class="filter-container" id="searchBox">
        <div class="left">
          <el-form :inline="true" class="demo-form-inline" size="medium" label-position="right">
            <el-form-item label="产品名称：">
              <el-input
                v-model="listQuery.name"
                clearable
                class="filter-item"
                placeholder="请输入产品名称"
              />
            </el-form-item>
            <el-form-item label="产品类型：">
              <el-select v-model="listQuery.loanType" style="width:100%;" placeholder="请选择">
                <el-option label="房抵贷" :value="1"></el-option>
                <el-option label="信用贷" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="restForm">重置</el-button>
        </div>
      </div>

      <vxe-toolbar ref="xToolbar">
        <template #buttons>
          <el-button
            v-loading="loading"
            type="text"
            icon="el-icon-plus"
            @click="addEvent"
          >新增产品</el-button>

        </template>
      </vxe-toolbar>
      <vxe-table
        v-loading="loading"
        :data="data"
        border="none"
        highlight-hover-row
        show-header-overflow
        show-overflow
        align="center"
        :header-cell-style="{background:'#F7F7F8',color:'#606266'}"
        @cell-dblclick="cellDblclick"
      >
        <vxe-table-column type="seq" title="序号" min-width="60" />
        <vxe-table-column title="所属机构" field="orgName" min-width="180" />
        <vxe-table-column title="资方名称" field="capitalName" min-width="180" />
        <vxe-table-column title="产品名称" field="productName" min-width="180" />
        <vxe-table-column title="产品类型" field="productType" min-width="130">
           <template slot-scope="scope">
             {{scope.row.productType && scope.row.productType==1 ? "房抵贷" : "信用贷"}}
           </template>
        </vxe-table-column>
        <vxe-table-column title="开放城市" field="openCity" min-width="130" />
        <vxe-table-column title="说明" field="desc" min-width="140" />
        <vxe-table-column title="状态 " field="status" min-width="140">
          <template slot-scope="scope">
           <span>
              <span>
                <i
                  class="smallCircle"
                  :class="[
                    scope.row.status =='0' ? 'text_active' : 'text_noActive'
                  ]"
                />{{ scope.row.status =='0' ? '启用' : '禁用' }}
              </span>
            </span>
        </template>
        </vxe-table-column>
        <vxe-table-column title="创建时间" field="createTime" min-width="180" />
        <vxe-table-column title="操作" align="center" fixed="right" min-width="180">
          <template v-slot="{ row }">
            <el-button type="text" @click="repayMethodEvent(row)">还款方式</el-button>
            <el-button type="text" @click="editEvent(row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" v-if="handelEditChoose(row)" @click="setStatus(row,1)">禁用</el-button>
            <el-button type="text" v-if="handelDeleteChoose(row)" @click="setStatus(row,0)">启用</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </el-card>

    <vxe-pager
      class="pager"
      @page-change="changePage"
      :current-page.sync="listQuery.pageNo"
      :page-size.sync="listQuery.pageSize"
      :total="total"
      :page-sizes="[10, 30, 50,100]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    ></vxe-pager>
    <!--  新增产品 -->
    <vxe-modal
      @close="closeModal"
      v-model="modalUpdate.show"
      width="700px"
      height="670px"
      :title="modalUpdate.edit ? '修改&保存' : '新增&保存'"
      class="addModal"
    >
      <!-- <template v-slot> -->
      <el-form style="padding: 20px 0 0;" :model="modalUpdateForm" title-align="right" title-width="100" ref="modalUpdateForm">
        <el-form-item
          label="产品名称"
          prop="productName"
          label-width="200px"
          :rules="{ required: true, message: '产品名称不能为空', trigger: 'blur' }"
        >
          <el-input
            v-model="modalUpdateForm.productName"
            placeholder="请输入产品名称"
            clearable
            style="width: 400px"
          />
        </el-form-item>

       <el-form-item
          label="资方"
          prop="capitalId"
          label-width="200px"
          :rules="{ required: true, message: '请选择资方', trigger: 'change' }"
        >
      <el-select v-model="modalUpdateForm.capitalId" placeholder="请选择" style="width: 400px">
          <el-option-group
            v-for="group in groupCapitalList"
            :key="group.label"
            :label="group.label">
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-option-group>
        </el-select>
        </el-form-item>

        <el-form-item
          label="产品类型"
          prop="productType"
          :rules="{ required: true, message: '请选择产品类型', trigger: 'blur' }"
          label-width="200px"
        >
        <el-select v-model="modalUpdateForm.productType" placeholder="请选择" style="width: 400px">
            <el-option  label="房抵贷" :value="1"></el-option>
            <el-option  label="信用贷" :value="2"></el-option>
       </el-select>       
        </el-form-item>

        <el-form-item
          label="利率"
          prop="oneBetRate"
          :rules="{ required: true, message: '请输入产品利率', trigger: 'blur' }"
          label-width="200px"
          v-if="modalUpdateForm.productType==2"
        >
         <el-input
              v-model.number="modalUpdateForm.oneBetRate"
              placeholder="请输入产品利率"
              clearable
              type="number"
              style="width: 400px;"
              autocomplete="off"
              suffix="%"
           ><template slot="append">%</template></el-input>   
        </el-form-item>
        <el-form-item
          label="抵押物类型"
          :rules="rules"
          label-width="200px"
          prop="onePledag"
          v-else
        >
          <el-form-item 
            style="margin-bottom: 10px;" 
          >
            <el-checkbox v-model="onePledag" label="一押" @change="(value) => checkChange(value,1)"></el-checkbox>
            <el-input
              v-model.number="modalUpdateForm.oneBetRate"
              placeholder="请输入产品利率"
              clearable
              type="number"
              style="width: 300px;margin-left: 10px;"
              :disabled="!onePledag"
              autocomplete="off"
              suffix="%"
           >
            <template slot="append">%</template>
           </el-input>
          </el-form-item>
          <el-form-item >
            <el-checkbox v-model="twoPledag" label="二押" @change="(value) => checkChange(value,2)"></el-checkbox>
            <el-input
              v-model.number="modalUpdateForm.twoBetRate"
              placeholder="请输入产品利率"
              clearable
              type="number"
              :disabled="!twoPledag"
              style="width: 300px;margin-left: 10px;"
              autocomplete="off"
           >
            <template slot="append">%</template>
           </el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item
          label="开放城市"
          prop="openCityList"
          label-width="200px"
          :rules="[{ required: true, message: '开放城市不能为空', trigger: 'blur'  }]"
          
        >
          <el-select 
            style="width: 400px"
            filterable
            multiple v-model="modalUpdateForm.openCityList" 
            placeholder="请选择开放城市" 
            clearable
            
           >
            <el-option v-for="(item) in chooseList" value-key="areaCode" :key="item.areaCode" :value="item.areaCode" :label="item.areaName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="desc" label-width="200px">
          <el-input
            v-model="modalUpdateForm.desc"
            placeholder="请输入简要说明"
            clearable
            style="width: 400px"
            type="textarea"
            :row="3"
            resize="none"
          />
        </el-form-item>
        <el-form-item label-width="200px" style="margin-top: 60px;">
          <el-button type="primary" @click="addOrUpdate('modalUpdateForm')" status="primary">提交</el-button>
          <el-button @click="closeModal" status="danger">关闭</el-button>
        </el-form-item>
      </el-form>
      <!-- </template> -->
    </vxe-modal>

        <!--  还款方式 -->
    <vxe-modal
      @close="closeRepayModal"
      v-model="modalListRepay.show"
      width="900px"
      height="670px"
      title="还款方式"
      class="addModal"
    >
           <vxe-toolbar ref="xToolbar1">
        <template #buttons>
          <el-button
            v-loading="loadingRepay"
            type="text"
            icon="el-icon-plus"
            @click="repayAddMethodEvent"
          >添加</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        v-loading="loadingRepay"
        :data="dataDict"
        border="none"
        highlight-hover-row
        show-header-overflow
        show-overflow
        align="center"
        :header-cell-style="{background:'#F7F7F8',color:'#606266'}"
        @cell-dblclick="cellDblclick"
      >
        <vxe-table-column type="seq" title="序号" min-width="60" />
        <vxe-table-column title="还款方式" field="dictName" min-width="150" />
        <vxe-table-column title="状态 " field="deleted" min-width="140">
          <template slot-scope="scope">
           <span>
              <span>
                <i
                  class="smallCircle"
                  :class="[
                    scope.row.deleted =='0' ? 'text_active' : 'text_noActive'
                  ]"
                />{{ scope.row.deleted =='0' ? '启用' : '禁用' }}
              </span>
            </span>
        </template>
        </vxe-table-column>
        <vxe-table-column title="备注" field="description" min-width="140" />
        <vxe-table-column title="创建时间" field="createTime" min-width="180" />
        <vxe-table-column title="操作" align="center" fixed="right" min-width="180">
          <template v-slot="{ row }">
            <el-button type="text" @click="repayUpdateMethodEvent(row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" v-if="handelEditChooseRepay(row)" @click="setStatusRepay(row,1)">禁用</el-button>
            <el-button type="text" v-if="handelDeleteChooseRepay(row)" @click="setStatusRepay(row,0)">启用</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </vxe-modal>


<!--还款方式添加修改-->

    <vxe-modal
      @close="closeRepayUpdateModal"
      v-model="modalUpdateRepay.show"
      width="700px"
      height="470px"
      :title="modalUpdateRepay.edit ? '编辑还款方式' : '新增还款方式'"
      class="addModal"
    >
      <!-- <template v-slot> -->
      <el-form class="repayMethod" style="padding: 20px 0 0;" :model="modalUpdateFormRepay" title-align="right" title-width="100" ref="modalUpdateFormRepay">
        <el-form-item
          label="还款方式"
          prop="dictName"
          label-width="200px"
          :rules="{ required: true, message: '还款方式不能为空', trigger: 'blur' }"
        >
          <el-input
            v-model="modalUpdateFormRepay.dictName"
            placeholder="请输入还款方式"
            clearable
            style="width: 400px"
          />
        </el-form-item>

       
        <el-form-item label="备注" prop="description" label-width="200px">
          <el-input
            v-model="modalUpdateFormRepay.description"
            placeholder="请输入备注"
            clearable
            style="width: 400px;"
            type="textarea"
            :row="3"
          />
        </el-form-item>
        <el-form-item label-width="200px" style="margin-top: 60px;">
          <el-button type="primary" @click="addOrUpdateRepay('modalUpdateFormRepay')" status="primary">提交</el-button>
          <el-button @click="closeRepayUpdateModal" status="danger">关闭</el-button>
        </el-form-item>
      </el-form>
      <!-- </template> -->
    </vxe-modal>
    <!--还款方式end-->


  </div>
</template>

<script>
import { queryAssetSideList,findCityList,saveOrUpdate } from '@/api/product';
import { listGroupCapital } from '@/api/org';
import { listDictPage,saveOrUpdateDict,deleteDict } from '@/api/dict';
import DicSelect from '@/components/select';
import { mapGetters } from 'vuex';
export default {
  name: 'AssetsIndex',
  components: { DicSelect },
  data() {
    let validateBetRate = (rule,value,callback) => {
      let twoBetRate = this.modalUpdateForm.twoBetRate;
      let oneBetRate = this.modalUpdateForm.oneBetRate;
      let reg = /^([1-9]\d*)(\.\d+)?$/;
      if(!oneBetRate && !twoBetRate) {
        callback('请选择抵押物类型')
      }else if(oneBetRate){
        if(!reg.test(oneBetRate)){
          callback("只能输入数字")
        }else{
          callback()
        }
      }else if(twoBetRate) {
        if(!reg.test(twoBetRate)){
          callback("只能输入数字")
        }else{
          callback()
        }
      }
    }
    return {
      active: 0,
      rules: {
        required: true, validator: validateBetRate, trigger:'change'
      },
      data: [],
      dataDict: [],
      groupCapitalList: [],
      dataCapital: [],
      total: 0,
      isCustomerManager:false,
      listQuery: {
        loanType: undefined, //资方名称
        pageNo: 1,
        pageSize: 10,
        name: "" //产品名称
      },
      showAll: true,
      loading: true,
      loadingRepay: true,
      loadingCapital: true,
      modalUpdate: {
        show: false,
        edit: false,
        originRow: {},
      },
      modalListRepay: {
        show: false,
        edit: false
      },
      modalUpdateRepay: {
        show: false,
        edit: false
      },
      modalListCapital: {
        show: false,
        edit: false
      },
      modalUpdateCapital: {
        show: false,
        edit: false
      },
      onePledag:false,
      twoPledag:false,
      modalUpdateForm: {
        id: undefined,
        capitalId: undefined,
        productType: undefined,
        productName: undefined,
        oneBetRate: undefined,
        twoBetRate: undefined,
        desc: undefined,
        openCityList: undefined,
        status:0
      },
      modalUpdateFormRepay: {
        id: undefined,
        dictName: undefined,
        productId: undefined,
        description: undefined,
        dict_type_name: "还款方式",
        deleted:0
      },
      chooseList: [],
      productId: undefined
    };
  },
  computed: {
    ...mapGetters(['roles']),
  },
  mounted() {},
  created() {
    this.getList()
    this.getChoose()
    this.getGroupCapitalList()
    if (this.roles.indexOf('客户经理') != -1) {
      this.isCustomerManager = true;
    }
  },
  methods: {
    betRate(rules,value,cb) {
      console.log(rules,value)
    },
    restForm() {
      this.listQuery = {
        capitalName: "",
        pageNo: 1,
        pageSize: 10,
        productName: ""
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      queryAssetSideList(this.listQuery)
        .then(data => {
          this.data = data.data;
          this.total = data.total;
          console.log('响应数据:%o', data);
        })
        .catch(error => {
          console.error('请求用户数据发生异常:' + error);
        });
      this.loading = false;
    },
    getDictList() {
      this.loadingRepay = true;
      listDictPage({dictTypeName: "还款方式",productId: this.productId,page: 1,limit: 20})
        .then(data => {
          this.dataDict = data.data;
          // this.total = data.total;
          // console.log('响应数据:%o', data);
        })
        .catch(error => {
          console.error('请求用户数据发生异常:' + error);
        });
      this.loadingRepay = false;
    },
    getChoose() {
      findCityList()
        .then((res) => {
          this.chooseList = res.data
        }).catch(() => {
           this.chooseList = []
        })
    },
    getGroupCapitalList() {
      listGroupCapital()
        .then((res) => {
          this.groupCapitalList = res.data
        }).catch(() => {
           this.groupCapitalList = []
        })
    },
    handleFilter() {
      this.listQuery.pageNo = 1;
      this.getList();
    },
    handelDeleteChoose(row) {
      if (row.status === 1) {
        if (row.status === 0) {
          return false;
        }
        return true;
      }
    },
    handelEditChoose(row) {
      if (row.status === 0) {
        if (row.status === 1) {
          return false;
        }
        return true;
      }
    },
    handelDeleteChooseRepay(row) {
      if (row.deleted === 1) {
        if (row.deleted === 0) {
          return false;
        }
        return true;
      }
    },
    handelEditChooseRepay(row) {
      if (row.deleted === 0) {
        if (row.deleted === 1) {
          return false;
        }
        return true;
      }
    },
    saveOrUpdateData(datas,msg) {
      saveOrUpdate(datas)
        .then(response => {
            this.$notify.success({
            title: '成功',
            message: msg,
          });
          this.closeModal()
          this.getList();
        })
        .catch(response => {});
    },
    saveOrUpdateDataRepay(datas,msg) {
      saveOrUpdateDict(datas)
        .then(response => {
            this.$notify.success({
            title: '成功',
            message: msg,
          });
          this.closeRepayUpdateModal()
          this.getDictList();
        })
        .catch(response => {});
    },
    setStatus(row,status) {
      console.log(row)
      row.status = status;
      this.saveOrUpdateData(row,status==0?"启用成功":"禁用成功");
    },
    setStatusRepay(row,status) {
      console.log(row)
      row.deleted = status;
      this.saveOrUpdateDataRepay(row,status==0?"启用成功":"禁用成功");
    },
    checkChange(value,type) {
      if(type == 1 && !value){
        this.modalUpdateForm.oneBetRate = undefined
      }else{
        this.modalUpdateForm.twoBetRate = undefined
      }
    },
    getUpdateFormParams(row) {
      this.modalUpdateForm = {
        id:row.id,
        capitalId: row.capitalId,
        productType: row.productType,
        productName: row.productName,
        oneBetRate: row.oneBetRate,
        twoBetRate: row.twoBetRate,
        desc: row.desc,
        openCityList: row.openCityList.map(String),
        status:row.status
      };
      if(row.oneBetRate != undefined) {
        this.onePledag = true
      }
      if(row.twoBetRate != undefined) {
        this.twoPledag = true
      }
    },
    getUpdateFormParamsRepay(row) {
      this.modalUpdateFormRepay = {
        id: row.id,
        dictName: row.dictName,
        productId: row.productId,
        description: row.description,
        dictTypeName: row.dictTypeName,
        deleted: row.deleted
      };
    },
    resetEvent() {
      this.getList();
    },
    changePage() {
      this.getList();
    },
    addOrUpdate() {
      const _this = this;
      this.$refs['modalUpdateForm'].validate(valid => {
        if (valid) {
          if(this.modalUpdateForm.oneBetRate == "") {
            this.modalUpdateForm.oneBetRate = undefined
          }
          if(this.modalUpdateForm.twoBetRate == "") {
            this.modalUpdateForm.twoBetRate = undefined
          }
          this.saveOrUpdateData(this.modalUpdateForm,"提交成功")
        }
      });
    },
    addOrUpdateRepay() {
      const _this = this;
      this.$refs['modalUpdateFormRepay'].validate(valid => {
        if (valid) {
          this.modalUpdateFormRepay.dictTypeName = "还款方式"
          this.modalUpdateFormRepay.productId = this.productId
          this.saveOrUpdateDataRepay(this.modalUpdateFormRepay,"提交成功")
        }
      });
    },
    addEvent(row) {
      this.modalUpdate.show = true;
      this.modalUpdate.edit = false;
    },
    editEvent(row) {
      this.modalUpdate.show = true;
      this.modalUpdate.edit = true;
      this.getUpdateFormParams(row)
    },
    closeModal(row) {
      this.modalUpdate.show = false;
      this.modalUpdate.edit = false;
      this.restAddForm(row);
    },
    repayMethodEvent(row) {
      this.productId = row.id
      this.getDictList()
      this.modalListRepay.show = true;
      this.modalListRepay.edit = true;
      // this.getUpdateFormParams(row)
    },
    closeRepayModal(row) {
      this.modalListRepay.show = false;
      this.modalListRepay.edit = false;
      // this.restAddForm(row);
    },
    repayAddMethodEvent(row) {
      this.modalUpdateRepay.show = true;
      this.modalUpdateRepay.edit = true;
      this.getUpdateFormParamsRepay(row)
    },
    repayUpdateMethodEvent(row) {
      this.modalUpdateRepay.show = true;
      this.modalUpdateRepay.edit = true;
      this.getUpdateFormParamsRepay(row)
    },
    closeRepayUpdateModal(row) {
      this.modalUpdateRepay.show = false;
      this.modalUpdateRepay.edit = false;
      // this.restAddForm(row);
    },
    addCapitalHandle(row) {//产品管理页面弹窗
      this.modalListCapital.show = true;
      this.modalListCapital.edit = true;
      // this.getUpdateFormParams(row)
    },
    closeCapitalModal(row) {
      this.modalListCapital.show = false;
      this.modalListCapital.edit = false;
      // this.restAddForm(row);
    },
    addCapitalEvent(row) {
      this.modalUpdateCapital.show = true;
      this.modalUpdateCapital.edit = true;
      // this.getUpdateFormParams(row)
    },
    updateCapitalEvent(row) {
      this.modalUpdateCapital.show = true;
      this.modalUpdateCapital.edit = true;
      // this.getUpdateFormParams(row)
    },
    closeCapitalUpdateModal(row) {
      this.modalUpdateCapital.show = false;
      this.modalUpdateCapital.edit = false;
      // this.restAddForm(row);
    },
    //  重置新增表单
    restAddForm(row) {
      this.onePledag=false,
      this.twoPledag=false,
      this.modalUpdateForm = {
        id:undefined,
        productName: undefined,
        oneBetRate: undefined,
        twoBetRate: undefined,
        desc: undefined,
        openCityList: undefined,
        status:0
      };
      this.$refs['modalUpdateForm'].resetFields();
    },
    cellDblclick({ row, rowIndex, column, columnIndex, cell }, event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    },
  },
};
</script>

<style lang="scss">
.addModal {
  .el-form-item__error {
    padding-top: 0;
    line-height: 0.7;
  }
}
</style>
<style lang="css" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}
#searchBox {
  overflow: hidden;
}

.pager {
  position: fixed;
  bottom: 0;
  right: 28px;
  background-color: #fafafb;
  z-index: 2;
  height: 40px;
  width: calc(100% - 260px);
}

.right >>> .el-button--primary,
.el-button--default {
  padding: 10px 20px;
}

.vxe-table--render-default >>> .el-button--text {
  color: #2b7bfb;
}
.app-container >>> .vxe-table--render-default,
.vxe-pager {
  font-family: PingFangSC, Arial, Helvetica, sans-serif;
}

.left {
  flex: 14;
  display: flex;
  flex-flow: row wrap;
  margin-right: 20px;
}
.left >>> .el-form {
  width: 100%;
}
.left >>> .el-form .el-form-item {
  display: flex;
  flex-flow: row nowrap;
  width: 30%;
  margin-right: 3%;
  float: left;
  margin-bottom: 14px;
}

.left >>> .el-form .el-form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
  text-align: left;
  /* flex: 1; */
}

.left >>> .el-form .el-form-item .el-form-item__content {
  flex: 1;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  width: 100%;
}
.date_item {
  width: 100%;
}
.right {
  flex: 2;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  margin-right: 30px;
  /* margin-bottom: 30px; */
}
</style>
